<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: right;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.form-el-radion {
  line-height: 30px;
  padding: 5px 0px;
  width: 100%;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.hex-el-tabs {
  border: 1px solid #EBEEF5;
  background-color: #FFF;
  color: #303133;
  transition: .3s;
  border-radius: 4px;
  overflow: hidden;
  padding: 15px;
}
</style>
<template>
  <div>
    <!--工具栏-->
    <div class="head-container" style="margin-top: 5px;">
      <crud-operation/>
    </div>
    <!--表格渲染-->
    <el-table v-loading="crud.loading" ref="table" :data="crud.data" style="width: 100%;"
              @select="crud.selectChange" @select-all="crud.selectAllChange"
              @selection-change="crud.selectionChangeHandler"
              :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
      <el-table-column type="selection" width="55"/>
      <el-table-column
        v-if="columns.visible('bizDate')"
        :show-overflow-tooltip="true"
        label="业务日期"
        prop="bizDate"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.bizDate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns.visible('jobCode')"
        :show-overflow-tooltip="true"
        label="作业编码"
        prop="jobCode"
      />
      <el-table-column
        v-if="columns.visible('taskCode')"
        :show-overflow-tooltip="true"
        label="任务编码"
        prop="taskCode"
      />
      <el-table-column
        v-if="columns.visible('taskName')"
        :show-overflow-tooltip="true"
        label="任务名称"
        prop="taskName"
      />
      <el-table-column
        v-if="columns.visible('execStTs')"
        width="200"
        :show-overflow-tooltip="true"
        label="开始时间"
        prop="execStTs"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.execStTs }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns.visible('execEndTs')"
        width="200"
        :show-overflow-tooltip="true"
        label="结束时间"
        prop="execEndTs"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.execEndTs }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import CRUD, {presenter, header, form, crud} from "@crud/crud"
import crudOperation from "@crud/extend/components/CRUD.OnlyLookOperation"

const queryList = [
  {cloumValue: "bizDate", cloumName: "业务日期"},
  {cloumValue: "jobCode", cloumName: "作业编码"},
  {cloumValue: "taskCode", cloumName: "任务编码"},
  {cloumValue: "taskName", cloumName: "任务名称"}
];
const defaultCrud = CRUD({
  title: "周期任务实例最新完成队列",
  queryList: queryList,
  queryOnPresenterCreated: false,
  url: 'api/queue/qryLatestTask'
});
const defaultForm = {};
export default {
  name: "LastFinishPeriodTaskQueue",
  components: {crudOperation},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ["cycle_job_status", "task_status", "task_track_type"],
  props: {},
  data() {
    return {};
  },
  methods: {
    doQuery() {
      this.crud.toQuery();
    },
    taskStatusFormatter(row, column) {
      return this.dict.label.task_status[row.taskStatus];
    },
    formatterType(type) {
      return this.dict.label.task_track_type[type];
    }
  },
};
</script>
